// 数据格式
// [{ count: number, time: string }]

// const padZero = (num: number): string => {
const padZero: (num: number) => string = (num) => {
  return num.toString().padStart(2, '0')
}

// !1. 封装一个格式化日期的函数
const formatTime = (date?: Date | string): string => {
  // 如果不传，就当前的时间
  if(!date) date = new Date()
  // 如果传了字符串，转为日期对象
  if(typeof date === 'string') date = new Date(date)
  
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  let ri = date.getDate()
  let hours = date.getHours()
  let minutes = date.getMinutes()
  let seconds = date.getSeconds()

  return `${year}-${padZero(month)}-${padZero(ri)} ${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`
}

// !2. 定义数据类型
type List = { count: number, time: string }[]

// !3. 获取数据的方法
const RIZI: 'RIZI' = 'RIZI'
const getData = (): List => {
  // JSON.parse 的参数要是 string
  // 而 localStorage.getItem 获取到的结果可能是 null
  // JSON.parse() 得到的结果可以是任意类型
  return JSON.parse(localStorage.getItem(RIZI) || '[]') as List
}

// !4. 存储数据的方法
const saveDataToLocal = (): void => {
  // 先获取本地数据
  const arr: List = getData()
  arr.push({
    count: arr.length ? arr[arr.length - 1].count + 1 : 1,
    time: formatTime(),
  })
  localStorage.setItem(RIZI, JSON.stringify(arr))
}

// !#5 渲染函数
const render = () => {
  saveDataToLocal()

  const arr = getData() // [{ count: 1, time: '2023-1-1' }] => ['<li>第 1 次访问，时间 2023-1-1 </li>', '<li>第 1 次访问，时间 2023-1-1 </li>']

  // const oApp = document.querySelector('#app') as HTMLDivElement
  const oApp = document.querySelector('#app')

  if(oApp) {
    oApp.innerHTML = arr.map(item => `<li>第 ${item.count} 次访问，时间 ${item.time} </li>`).join('')
  }
}

render()

export {}